<template>
	<view class="commodity-details">
		<view class="rd_header" v-if="data.changeType == 1">
			<view class="rd_address">
				<view class="rd_ad_info" v-if="data.sendOutStatus == 1">待发货</view>
				<block v-else>
					<view class="rd_ad_info">已发货</view>
					<view class="rd_ad_order" @click="copy(data.waybillNo)">
						<text>运单号：{{data.waybillNo}}</text>
						<image class="rd_copy" src="/static/newsImg/copy_w.png" mode=""></image>
					</view>
				</block>
					<view class="c_title">配送地址：</view>
				</block>
			</view>
			<view class="content" >
				<view class="info">
					<text class="name">{{data.customerName}}</text>
					<text class="tel">{{data.customerPhone}}</text>
				</view>
				<view class="address">
					{{data.address}}
				</view>
			</view>
		</view>
		<view class="cd_header">
			<view class="cd_header_img">
				<image class="imgBox" :src="data.img" mode="aspectFill"></image>
			</view>
				<view class="exhibition">
					<view class="exhibition_title">
						<view class="exhibition_title_img">
							<image v-if="data.changeType == 1" class="imgBox" src="/static/newsImg/de_sw.png" mode="widthFix"></image>
							<image v-else-if="data.changeType == 2" class="imgBox" src="/static/newsImg/de_nft.png" mode="widthFix"></image>
							<image v-else-if="data.changeType == 5" style="width: 146rpx;" class="imgBox" src="/static/newsImg//de_mhyhq.png" mode="widthFix"></image>
							<image v-else class="imgBox" src="/static/newsImg/de_xs.png" mode="widthFix"></image>
						</view>
						<text :class="data.changeType == 5?'type_five':''">{{data.commodityName}}</text>
					</view>
					<view class="exhibition_center">
						<view class="yuan"></view>
						<view class="line"></view>
						<view class="yuan"></view>
					</view>
					<view class="exhibition_coco">
						<view class="info_coco">
							<image src="/static/newsImg/shenye_cion01.png" mode="" v-if="data.priceType == 1"></image>
                            <image src="/static/newsImg/shenye_cion02.png" mode="" v-if="data.priceType == 2"></image>
							<view class="num">{{data.pay}}<text>{{data.priceTypeDict}}</text> </view>
						</view>
						<view class="service_charge">手续费：{{data.fee}} {{data.feeTypeDict}}</view>
					</view>
				</view>
		</view>
		<view class="rd_time exchange_code" v-if="data.changeType == 3" @click="copy(data.code)">
			<text>兑换码：{{data.code}}</text>
			<image class="rd_copy" src="/static/my/copy.png" mode=""></image>
		</view>
		<view class="rd_time">
			兑换时间：{{data.createTime}}
		</view>
		<view class="use_rules">
			<view class="use_rules_title">使用规则</view>
			<view class="use_rules_content">{{data.rule}}</view>
		</view>
		<view class="graphic_details" v-if="data.content != ''">
			<view class="graphic_details_title">
				<image src="/static/newsImg/de_icon.png" mode=""></image>
				<view class="gd_word">图文详情</view>
				<image src="/static/newsImg/de_icon.png" mode=""></image>
			</view>
			<view class="graphic_details_content">
				<rich-text :nodes="data.content"></rich-text>
			</view>
		</view>
		
		
<!-- 		<uni-popup ref="popup" >
			<view class="popupBox">
				<view class="title">
					<view class="title_left">选择配送地址</view>
					<view class="title_right">
						<image src="/static/newsImg/edit.png" mode=""></image>
						<text>修改</text>
					</view>
				</view>

				<view class="but">
					<view class="cancel" @click="closePopup">取消</view>
					<view class="determine" @click="passwordOpen">确定</view>
				</view>
			</view>
		</uni-popup> -->
	
	</view>
</template>

<script>
    import { getOrderInfo } from '@/api/api-v1-2.js'
	export default {
		data() {
			return {
				data:{},
				id:''
			}
		},
		onLoad(e){
			this.id = e.id
			this.getDetailsInfo()
		},
		methods: {
			// 获取详细信息
			getDetailsInfo(){
				uni.showLoading({ title: '加载中' })
				getOrderInfo(this.id).then(res=>{
					console.log(res)
					this.data = res.result
					uni.hideLoading()
				})
			},
			// 复制
			copy(text) {
				if (text != '') {
					var _this = this
					_this.$copyText(text).then(
						res => {
							uni.showToast({
								title: '复制成功',
								icon: 'none'
							})
						}
					)
				}

			},
		}
	}
</script>

<style scoped>
	page {
		background: #F5F5F5;
	}
	.commodity-details{
		padding-bottom: 180rpx;
	}
	.cd_header{
		margin-bottom: 30rpx;
	}
	.cd_header_img {
		width: 690rpx;
		height: 460rpx;
		margin: 0 auto;
		/* background: #F1EFF9; */
		border-radius: 16rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}
	.exhibition {
		width: 690rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 8px;
		margin-top: 38rpx;
	}
	.exhibition_title{
		width: 100%;
		/* line-height: 56rpx; */
		color:#222222;
		font-size: 32rpx;
		padding: 30rpx;
		box-sizing: border-box;
		line-height: 56rpx;
		position: relative;
		
	}
	.exhibition_title_img{
		position: absolute;
		left: 30rpx;
		width: 120rpx;
		height: 56rpx;
	}
	.exhibition_title text{
		padding-left: 134rpx;
	}
	.type_five{
		padding-left: 160rpx !important;
	}
	.exhibition_center{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		position: relative;
	}
	.exhibition_center .yuan{
		position: absolute;
		width: 38rpx;
		height: 38rpx;
		background: #F5F5F5;
		border-radius: 50%;
	}
	.exhibition_center .yuan:nth-child(1){
		left: -14rpx;
	}
	.exhibition_center .yuan:nth-child(3){
		right: -14rpx;
	}
	.exhibition_center .line{
		width: 624rpx;
		height: 0;
		margin: 0 auto;
		border: 1rpx dashed #DEDEDE;
	}
	.exhibition_coco{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx 52rpx 30rpx;
		
	}
	.service_charge{
		font-size: 24rpx;
		color: #666666;
	}
	.info_coco{
		font-size: 30rpx;
		color: #FF1919;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.info_coco .num{
		font-size: 50rpx;
	}
	.info_coco text{
		font-size: 34rpx;
		margin-left: 10rpx;
	}
	.info_coco image{
		width: 44rpx;
		height: 44rpx;
		margin-right: 14rpx;
	}
	
	.rd_time{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx 36rpx;
		color: #222222;
		font-size: 28rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
	.exchange_code{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		word-break: break-all;
	}
	 .exchange_code text {
		 width: 90%;
	 }
	/* 使用规则 */
	.use_rules{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 40rpx;
		box-sizing: border-box;
	}
	.use_rules_title{
		font-size: 30rpx;
		color: #222222;
		margin-bottom: 20rpx;
	}
	.use_rules_content{
		font-size: 28rpx;
		color:#444444;
	}
	/* 图文详情 */
	.graphic_details{
		margin-top: 60rpx;
	}
	.graphic_details_title{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}
	.graphic_details_title image{
		width: 34rpx;
		height: 20rpx;
	}
	.graphic_details_title .gd_word{
		margin: 0 32rpx;
		font-size: 30rpx;
		color: #222222;
	}
	.graphic_details_title image:last-child{
		transform: rotate(180deg);
	}
	.graphic_details_content{
		padding: 0 32rpx;
		width: 100%;
		box-sizing: border-box;
	}
	/* 配送地址 */
	.rd_address{
		width: 100%;
		background: linear-gradient(122.53deg, #5519FF 9.13%, #4FA2FF 88.03%);
		padding: 44rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		/* transform: matrix(-1, 0, 0, 1, 0, 0); */
	}
	.rd_address .rd_ad_info{
		font-size: 44rpx;
		color: #ffffff;
	}
	.rd_address .rd_ad_order{
		margin-top: 14rpx;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		word-break: break-all;
	}
	.rd_address .rd_ad_order text{
		width: 90%;
	}
	.rd_copy{
		width: 34rpx;
		height: 34rpx;
	}
	.rd_address .c_title{
		width: 690rpx;
		margin: 0 auto;
		padding: 30rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #666666;
		background: #ffffff;
		border-radius:16rpx 16rpx 0 0;
		margin-top: 44rpx;
	}
	.content{
		width: 690rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx 28rpx 30rpx 28rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #666666;
		border-radius:0 0 16rpx 16rpx;
	}
	.content .info{
		margin-bottom: 20rpx;
		color: #222222;
	}
	.content .name{
		margin-right: 30rpx;
	}
	

</style>
